<template>
    <div ref="chatList" class="chatList">
        <template v-if="quizData">
            <userMessageRight
                v-if="!isDetail && userInfo.id == quizData.uid"
                :avatar="quizData.avatar"
                :timestamp="quizData.add_time_text"
                :senderUserID="quizData.nickname"
                :message="quizData.title"
                :UserID="quizData.uid"
                :showV="quizData.quiz_is_major == 1"
            ></userMessageRight>
            <userMessageLeft
                v-else
                :avatar="quizData.avatar"
                :timestamp="quizData.add_time_text"
                :senderUserID="quizData.nickname"
                :message="quizData.title"
                :UserID="quizData.uid"
                :showV="quizData.quiz_is_major == 1"
            ></userMessageLeft>
            <div
                v-for="(item, index) in quizData.info_images"
                :key="index + '1'"
            >
                <userMessageRight
                    v-if="!isDetail && userInfo.id == quizData.uid"
                    :avatar="quizData.avatar"
                    :timestamp="quizData.add_time_text"
                    :senderUserID="quizData.nickname"
                    :message="item"
                    :type="11"
                    :UserID="quizData.uid"
                    :showV="quizData.quiz_is_major == 1"
                    @previewImg="previewImg"
                ></userMessageRight>
                <userMessageLeft
                    v-else
                    :avatar="quizData.avatar"
                    :timestamp="quizData.add_time_text"
                    :senderUserID="quizData.nickname"
                    :message="item"
                    :type="11"
                    :UserID="quizData.uid"
                    :showV="quizData.quiz_is_major == 1"
                    @previewImg="previewImg"
                ></userMessageLeft>
            </div>
        </template>
        <!-- <div
            v-if="
                !isDetail &&
                quizData &&
                curMessageList.length == 0 &&
                quizData.uid == userInfo.id
            "
            class="system-news2"
        >
            <span>{{ quizWendaReminder }}</span>
        </div> -->
        <!-- <div
            v-if="
                !isDetail &&
                quizData &&
                quizData.status == '1' &&
                quizData.uid == userInfo.id
            "
            class="system-news2"
        >
            <span>{{
                isWork == 1
                    ? "正在为您匹配老师，预计1分钟，请耐心等待"
                    : "当前为非工作时段，可能无法及时为您匹配到老师，烦请谅解"
            }}</span>
        </div> -->
        <div v-for="(item, index) in curMessageList" :key="index + '2'">
            <template v-if="!item.is_supplement || item.is_supplement == 0">
                <div
                    v-if="!isDetail && getType(item.extendedData) == 2"
                    class="system-news2"
                >
                    <span>{{
                        userInfo.id == quizData.uid
                            ? "您已续费成功，请在续费的时间内做出问答"
                            : "当前用户已续费五分钟，请您在续费时间内提供良好的服务"
                    }}</span>
                </div>
                <div
                    v-if="!isDetail && item.is_revoke == 1"
                    class="system-news2"
                >
                    <span>消息撤回</span>
                </div>
                <userMessageRight
                    v-else-if="
                        (!isDetail && item.senderUserID == userInfo.id) ||
                        (isDetail && item.senderUserID == quizData.ans_uid)
                    "
                    :avatar="getAvatar(item.extendedData, item.senderUserID)"
                    :timestamp="getTime(item.timestamp)"
                    :senderUserID="
                        getNickname(item.extendedData, item.senderUserID)
                    "
                    :UserID="item.senderUserID"
                    :quoteMsg="getQuoteMsg(item.extendedData)"
                    :message="item.message"
                    :type="getType(item.extendedData)"
                    :showV="getSendUserMajor(item.senderUserID)"
                    :receiptStatus="item.receiptStatus"
                    :isDetail="isDetail"
                    @previewImg="previewImg"
                >
                </userMessageRight>
                <userMessageLeft
                    v-else
                    :avatar="getAvatar(item.extendedData, item.senderUserID)"
                    :timestamp="getTime(item.timestamp)"
                    :senderUserID="
                        getNickname(item.extendedData, item.senderUserID)
                    "
                    :UserID="item.senderUserID"
                    :quoteMsg="getQuoteMsg(item.extendedData)"
                    :message="item.message"
                    :type="getType(item.extendedData)"
                    :showV="getSendUserMajor(item.senderUserID)"
                    @previewImg="previewImg"
                ></userMessageLeft>
            </template>
        </div>

        <div
            v-if="!isDetail && showTimeTooltip && userInfo.id == quizData.uid"
            class="system-news2"
        >
            <span>
                您好，如还有问题请及时与老师沟通，如无问题请点击结束，否则，系统将在1分钟后默认该解答结束。
            </span>
        </div>
        <div
            v-if="
                !isDetail &&
                userInfo.id == quizData.uid &&
                isShowDJS == 0 &&
                DJSnoTimeShow
            "
            class="system-news2"
        >
            <span> 您的问答时间不足，请注意问答时长。 </span>
        </div>

        <div
            v-if="
                !isDetail &&
                quizData &&
                quizData.status == '3' &&
                (quizData.uid == userInfo.id || quizData.ans_uid == userInfo.id)
            "
            class="system-news"
        >
            该问题已结束
        </div>

        <div
            v-if="
                !isDetail &&
                quizData &&
                quizData.status == '3' &&
                quizData.is_satisfied == 0 &&
                quizData.uid == userInfo.id &&
                (quizData.coupon_id == 0 || gaunbishawanyiShow)
            "
            class="end"
        >
            <div class="title">
                <img src="~/assets/images/service/fadang.png" alt="" />
                您对我的服务满意吗？
            </div>
            <div class="buts">
                <el-button
                    class="but1"
                    :type="selectBut == 2 ? 'primary' : ''"
                    round
                    @click="checkSatisfied(2)"
                    >不满意</el-button
                >
                <el-button
                    class="but2"
                    :type="selectBut == 1 ? 'primary' : ''"
                    round
                    @click="checkSatisfied(1)"
                    >满意</el-button
                >
            </div>
            <div v-show="selectBut == 2" class="end-textarea">
                <el-input
                    v-model="textarea"
                    type="textarea"
                    :rows="3"
                    placeholder="（必填项）请您填写不满意的原因，我们将根据您的反馈给出官方解答。"
                    resize="none"
                    max="500"
                >
                </el-input>
            </div>
            <div v-show="selectBut == 2" class="end-submit">
                <el-button type="primary" size="mini" plain @click="nonono">
                    提交
                </el-button>
            </div>
        </div>
        <div
            v-if="
                !isDetail &&
                quizData &&
                quizData.status == '3' &&
                quizData.is_satisfied == 0 &&
                quizData.uid == userInfo.id &&
                userInfo.is_gpt_vip == 0 &&
                quizData.coupon_id != 0 &&
                !gaunbishawanyiShow
            "
            class="end"
        >
            <div class="title">您对我的服务满意吗？</div>
            <div class="title" style="font-size: 14px; padding-top: 5px">
                当前剩余{{ cpuponNum }}张券，<nuxt-link
                    style="color: #1b8dff"
                    to="/cswd/ask"
                    >去使用></nuxt-link
                >
            </div>
            <div class="buts">
                <el-button
                    class="but1"
                    type="info"
                    round
                    @click="gaunbishawanyiShow = true"
                    >不，谢谢</el-button
                >
                <el-button
                    class="but2"
                    type="primary"
                    round
                    @click="set_payVipShow(true)"
                    >开通VIP</el-button
                >
            </div>
        </div>
        <div v-if="bcList.length > 0" class="bc-list">
            <div class="bc-title">
                <i class="el-icon-success"></i>
                老师补充
            </div>
            <div
                v-for="(item, index) in bcList"
                :key="index + '3'"
                class="bc-item"
            >
                <userMessageLeft
                    :avatar="getAvatar(item.extendedData, item.senderUserID)"
                    :timestamp="getTime(item.timestamp)"
                    :senderUserID="
                        getNickname(item.extendedData, item.senderUserID)
                    "
                    :UserID="item.senderUserID"
                    :quoteMsg="getQuoteMsg(item.extendedData)"
                    :message="item.message"
                    :type="getType(item.extendedData)"
                    :showV="getSendUserMajor(item.senderUserID)"
                    @previewImg="previewImg"
                ></userMessageLeft>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import userMessageLeft from "@/components/csjh/components/userMessageLeft.vue";
import userMessageRight from "@/components/csjh/components/userMessageRight.vue";
import { getCouponList } from "@/assets/api/userCenterApi";
export default {
    components: {
        userMessageLeft,
        userMessageRight,
    },
    name: "chatList",
    props: {
        quizData: {
            type: Object | Boolean,
            default: () => {
                return false;
            },
        },
        QuizDetail: {
            type: Object | Boolean,
            default: () => {
                return false;
            },
        },
        curMessageList: {
            type: Array,
            default: () => {
                return [];
            },
        },
        isDetail: {
            type: Boolean,
            default: false,
        },
        showTimeTooltip: {
            type: Boolean,
            default: false,
        },
        quizWendaReminder: {
            type: String,
            default: "",
        },
        isWork: {
            type: String | Number,
            default: "1",
        },
        DJSnoTimeShow: {
            tyepe: Boolean,
            default: false,
        },
        isShowDJS: {
            type: Number,
            default: 0,
        },
    },
    watch: {
        quizData: function (n, o) {
            if (n) this.scrollBottom();
        },
        curMessageList: function (n, o) {
            if (n) {
                this.bcList = [];
                for (let item of n) {
                    if (item.is_supplement && item.is_supplement == 1)
                        this.bcList.push(item);
                }
                setTimeout(() => {
                    this.scrollBottom();
                }, 200);
            }
        },
        showTimeTooltip: function (n, o) {
            if (n) this.scrollBottom();
        },
    },
    data() {
        return {
            selectBut: 0,
            textarea: "",
            bcList: [],

            getAvatar: (str, senderUserID) => {
                if (this.QuizDetail) {
                    if (senderUserID == this.quizData.ans_uid) {
                        return this.QuizDetail.ans_uid.avatar;
                    } else if (senderUserID == this.quizData.uid) {
                        return this.QuizDetail.uid.avatar;
                    }
                }
                // if (str) {
                //     if (typeof str == "string") return JSON.parse(str).avatar;
                //     else return str.avatar;
                // }
            },
            getNickname: (str, senderUserID) => {
                if (this.QuizDetail) {
                    if (senderUserID == this.quizData.ans_uid) {
                        return this.QuizDetail.ans_uid.nickname;
                    } else if (senderUserID == this.quizData.uid) {
                        return this.QuizDetail.uid.nickname;
                    }
                }
                // if (str) {
                //     if (typeof str == "string") return JSON.parse(str).nickname;
                //     else return str.nickname;
                // }
            },
            getType: (str) => {
                if (str) {
                    if (typeof str == "string")
                        return JSON.parse(str).type ? JSON.parse(str).type : 1;
                    else return str.type ? str.type : 1;
                }
            },
            getTime: (timestamp) => {
                var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                let Y = date.getFullYear(),
                    M =
                        date.getMonth() + 1 < 10
                            ? "0" + (date.getMonth() + 1)
                            : date.getMonth() + 1,
                    D =
                        date.getDate() < 10
                            ? "0" + date.getDate()
                            : date.getDate(),
                    h =
                        date.getHours() < 10
                            ? "0" + date.getHours()
                            : date.getHours(),
                    m =
                        date.getMinutes() < 10
                            ? "0" + date.getMinutes()
                            : date.getMinutes(),
                    s =
                        date.getSeconds() < 10
                            ? "0" + date.getSeconds()
                            : date.getSeconds();
                return Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s;
            },
            getSendUserMajor: (id) => {
                // console.log(id);
                if (this.quizData.quiz_is_major == 1 && id == this.quizData.uid)
                    return true;
                else if (
                    this.quizData.ans_is_major == 1 &&
                    id == this.quizData.ans_uid
                )
                    return true;
                else return false;
            },
            getQuoteMsg: (str) => {
                if (str) {
                    if (typeof str == "string") return JSON.parse(str).quoteMsg;
                    else return str.quoteMsg;
                }
            },

            gaunbishawanyiShow: false,
            cpuponNum: 0,
        };
    },
    mounted() {
        // 滚动到聊天列表底部
        // this.scrollBottom();
        this.bcList = [];
        this.getCouponList();
        for (let item of this.curMessageList) {
            if (item.is_supplement && item.is_supplement == 1)
                this.bcList.push(item);
        }
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    methods: {
        ...mapMutations("common", ["set_payVipShow"]),
        scrollBottom() {
            this.$nextTick(() => {
                this.$refs.chatList.scrollTop =
                    this.$refs.chatList.scrollHeight;
            });
        },

        async getCouponList() {
            const res = await getCouponList({
                status: 0,
                is_effective: 1,
            });
            if (res.code == 1) {
                this.cpuponNum = res.data.list.length;
            }
        },

        previewImg(imgs) {
            this.$emit("previewImg", imgs);
        },

        // 不满意反馈
        nonono() {
            if (!this.textarea) {
                this.$message({
                    message:
                        "请您填写不满意的原因，我们将根据您的反馈给出官方解答。",
                    type: "warning",
                });
                return;
            }
            this.$emit("checkSatisfied", this.selectBut, this.textarea);
        },

        checkSatisfied(is) {
            this.selectBut = is;
            if (is == 2) {
                this.$nextTick(() => {
                    this.scrollBottom();
                });
            } else {
                this.$emit("checkSatisfied", is);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.chatList {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 30px;
    padding-bottom: 20px;
    box-sizing: border-box;
    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #f3f3f3;
    }

    &::-webkit-scrollbar-track {
        border-radius: 0;
    }
}

.user-name-time {
    padding-bottom: 10px;
    display: flex;
    align-items: flex-end;
    .name {
        font-size: 16px;
        color: #333333;
    }
    .time {
        font-size: 12px;
        padding: 0 7px;
        font-weight: 300;
        color: #666666;
    }
}

.system-news {
    width: 280px;
    height: 35px;
    margin: 0 auto;
    margin-top: 50px;
    background: #ffffff;
    border-radius: 105px;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
    color: #ff6161;
}

.system-news2 {
    line-height: 35px;
    max-width: 547px;
    margin: 0 auto;
    margin-top: 25px;
    line-height: 35px;
    text-align: center;
    font-size: 14px;
    color: #a2a2a2;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
        padding: 0 32px;
        background: #ffffff;
        border-radius: 105px;
    }
}

.end {
    margin: 0 auto;
    margin-top: 25px;
    width: 540px;
    padding: 0 55px;
    background: #f6faff;
    border-radius: 14px;
    .title {
        padding-top: 26px;

        font-size: 17px;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            width: 18px;
            height: 18px;
            margin-right: 7px;
        }
    }

    .buts {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 31px;
        padding-bottom: 20px;
        .but1,
        .but2 {
            margin: 0 10px;
            width: 134px;
            height: 40px;
            font-size: 15px;
        }
    }

    .end-textarea {
        margin-top: 25px;
    }

    .end-submit {
        margin-top: 10px;
        display: flex;
        justify-content: flex-end;
    }
}

.end-textarea ::v-deep .el-textarea__inner {
    border: 1px solid #d6e8ff;
}

.bc-list {
    width: 92%;
    margin: 0 auto;
    margin-top: 40px;
    background: #ffffff;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 15px 28px;
    .bc-title {
        font-size: 16px;
        color: #22b63b;
        position: relative;
        left: -8px;
        i {
            font-size: 20px;
            position: relative;
            top: 2px;
        }
    }
}
</style>
